<template>
  <div class="system-settings">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-left">
        <h1 class="page-title">系统设置</h1>
        <p class="page-desc">管理企业系统配置和偏好设置</p>
      </div>
    </div>

    <!-- 设置内容 -->
    <div class="settings-container">
      <el-row :gutter="20">
        <!-- 左侧设置菜单 -->
        <el-col :xs="24" :md="6">
          <el-card class="settings-menu">
            <el-menu :default-active="activeMenu" class="settings-nav" @select="handleMenuSelect">
              <el-menu-item index="general">
                <el-icon>
                  <Setting />
                </el-icon>
                <span>通用设置</span>
              </el-menu-item>
              <el-menu-item index="notification">
                <el-icon>
                  <Bell />
                </el-icon>
                <span>通知设置</span>
              </el-menu-item>
              <el-menu-item index="security">
                <el-icon>
                  <Lock />
                </el-icon>
                <span>安全设置</span>
              </el-menu-item>
              <el-menu-item index="integration">
                <el-icon>
                  <Connection />
                </el-icon>
                <span>集成设置</span>
              </el-menu-item>
              <el-menu-item index="backup">
                <el-icon>
                  <FolderOpened />
                </el-icon>
                <span>备份设置</span>
              </el-menu-item>
              <el-menu-item index="advanced">
                <el-icon>
                  <Tools />
                </el-icon>
                <span>高级设置</span>
              </el-menu-item>
            </el-menu>
          </el-card>
        </el-col>

        <!-- 右侧设置内容 -->
        <el-col :xs="24" :md="18">
          <!-- 通用设置 -->
          <el-card v-show="activeMenu === 'general'" class="settings-content">
            <template #header>
              <div class="card-header">
                <el-icon>
                  <Setting />
                </el-icon>
                <span>通用设置</span>
              </div>
            </template>

            <el-form :model="generalSettings" label-width="150px">
              <el-form-item label="系统语言">
                <el-select v-model="generalSettings.language" style="width: 200px">
                  <el-option label="简体中文" value="zh-CN" />
                  <el-option label="English" value="en-US" />
                </el-select>
              </el-form-item>

              <el-form-item label="时区设置">
                <el-select v-model="generalSettings.timezone" style="width: 200px">
                  <el-option label="北京时间 (UTC+8)" value="Asia/Shanghai" />
                  <el-option label="东京时间 (UTC+9)" value="Asia/Tokyo" />
                  <el-option label="纽约时间 (UTC-5)" value="America/New_York" />
                </el-select>
              </el-form-item>

              <el-form-item label="日期格式">
                <el-select v-model="generalSettings.dateFormat" style="width: 200px">
                  <el-option label="YYYY-MM-DD" value="YYYY-MM-DD" />
                  <el-option label="MM/DD/YYYY" value="MM/DD/YYYY" />
                  <el-option label="DD/MM/YYYY" value="DD/MM/YYYY" />
                </el-select>
              </el-form-item>

              <el-form-item label="分页大小">
                <el-select v-model="generalSettings.pageSize" style="width: 200px">
                  <el-option label="10条/页" :value="10" />
                  <el-option label="20条/页" :value="20" />
                  <el-option label="50条/页" :value="50" />
                  <el-option label="100条/页" :value="100" />
                </el-select>
              </el-form-item>

              <el-form-item label="自动保存">
                <el-switch v-model="generalSettings.autoSave" active-text="开启" inactive-text="关闭" />
              </el-form-item>

              <el-form-item>
                <el-button type="primary" @click="saveGeneralSettings" :loading="saving">
                  保存设置
                </el-button>
              </el-form-item>
            </el-form>
          </el-card>

          <!-- 通知设置 -->
          <el-card v-show="activeMenu === 'notification'" class="settings-content">
            <template #header>
              <div class="card-header">
                <el-icon>
                  <Bell />
                </el-icon>
                <span>通知设置</span>
              </div>
            </template>

            <el-form :model="notificationSettings" label-width="150px">
              <el-form-item label="邮件通知">
                <div class="notification-group">
                  <el-checkbox v-model="notificationSettings.email.newApplication">
                    新简历投递
                  </el-checkbox>
                  <el-checkbox v-model="notificationSettings.email.interviewReminder">
                    面试提醒
                  </el-checkbox>
                  <el-checkbox v-model="notificationSettings.email.offerUpdate">
                    Offer状态更新
                  </el-checkbox>
                  <el-checkbox v-model="notificationSettings.email.systemUpdate">
                    系统更新
                  </el-checkbox>
                </div>
              </el-form-item>

              <el-form-item label="站内通知">
                <div class="notification-group">
                  <el-checkbox v-model="notificationSettings.internal.newApplication">
                    新简历投递
                  </el-checkbox>
                  <el-checkbox v-model="notificationSettings.internal.interviewReminder">
                    面试提醒
                  </el-checkbox>
                  <el-checkbox v-model="notificationSettings.internal.offerUpdate">
                    Offer状态更新
                  </el-checkbox>
                  <el-checkbox v-model="notificationSettings.internal.systemUpdate">
                    系统更新
                  </el-checkbox>
                </div>
              </el-form-item>

              <el-form-item label="短信通知">
                <div class="notification-group">
                  <el-checkbox v-model="notificationSettings.sms.urgentInterview">
                    紧急面试通知
                  </el-checkbox>
                  <el-checkbox v-model="notificationSettings.sms.systemAlert">
                    系统警报
                  </el-checkbox>
                </div>
              </el-form-item>

              <el-form-item label="通知时间">
                <el-time-picker v-model="notificationSettings.quietHours.start" placeholder="免打扰开始时间"
                  style="width: 150px; margin-right: 10px" />
                <span>至</span>
                <el-time-picker v-model="notificationSettings.quietHours.end" placeholder="免打扰结束时间"
                  style="width: 150px; margin-left: 10px" />
              </el-form-item>

              <el-form-item>
                <el-button type="primary" @click="saveNotificationSettings" :loading="saving">
                  保存设置
                </el-button>
              </el-form-item>
            </el-form>
          </el-card>

          <!-- 安全设置 -->
          <el-card v-show="activeMenu === 'security'" class="settings-content">
            <template #header>
              <div class="card-header">
                <el-icon>
                  <Lock />
                </el-icon>
                <span>安全设置</span>
              </div>
            </template>

            <el-form :model="securitySettings" label-width="150px">
              <el-form-item label="密码策略">
                <div class="security-group">
                  <el-checkbox v-model="securitySettings.passwordPolicy.requireUppercase">
                    要求大写字母
                  </el-checkbox>
                  <el-checkbox v-model="securitySettings.passwordPolicy.requireLowercase">
                    要求小写字母
                  </el-checkbox>
                  <el-checkbox v-model="securitySettings.passwordPolicy.requireNumbers">
                    要求数字
                  </el-checkbox>
                  <el-checkbox v-model="securitySettings.passwordPolicy.requireSpecialChars">
                    要求特殊字符
                  </el-checkbox>
                </div>
              </el-form-item>

              <el-form-item label="密码长度">
                <el-input-number v-model="securitySettings.passwordPolicy.minLength" :min="6" :max="20"
                  style="width: 150px" />
                <span style="margin-left: 10px">位</span>
              </el-form-item>

              <el-form-item label="密码有效期">
                <el-input-number v-model="securitySettings.passwordExpiry" :min="30" :max="365" style="width: 150px" />
                <span style="margin-left: 10px">天</span>
              </el-form-item>

              <el-form-item label="登录失败锁定">
                <el-switch v-model="securitySettings.loginLockout.enabled" active-text="开启" inactive-text="关闭" />
                <div v-if="securitySettings.loginLockout.enabled" style="margin-top: 10px">
                  <el-input-number v-model="securitySettings.loginLockout.maxAttempts" :min="3" :max="10"
                    style="width: 100px" />
                  <span style="margin: 0 10px">次失败后锁定</span>
                  <el-input-number v-model="securitySettings.loginLockout.lockDuration" :min="5" :max="60"
                    style="width: 100px" />
                  <span style="margin-left: 10px">分钟</span>
                </div>
              </el-form-item>

              <el-form-item label="双因子认证">
                <el-switch v-model="securitySettings.twoFactorAuth" active-text="开启" inactive-text="关闭" />
              </el-form-item>

              <el-form-item label="IP白名单">
                <el-switch v-model="securitySettings.ipWhitelist.enabled" active-text="开启" inactive-text="关闭" />
                <div v-if="securitySettings.ipWhitelist.enabled" style="margin-top: 10px">
                  <el-input v-model="securitySettings.ipWhitelist.ips" type="textarea" :rows="3"
                    placeholder="请输入IP地址，每行一个" style="width: 300px" />
                </div>
              </el-form-item>

              <el-form-item>
                <el-button type="primary" @click="saveSecuritySettings" :loading="saving">
                  保存设置
                </el-button>
              </el-form-item>
            </el-form>
          </el-card>

          <!-- 集成设置 -->
          <el-card v-show="activeMenu === 'integration'" class="settings-content">
            <template #header>
              <div class="card-header">
                <el-icon>
                  <Connection />
                </el-icon>
                <span>集成设置</span>
              </div>
            </template>

            <el-form :model="integrationSettings" label-width="150px">
              <el-form-item label="邮件服务">
                <el-input v-model="integrationSettings.email.smtpHost" placeholder="SMTP服务器"
                  style="width: 200px; margin-bottom: 10px" />
                <el-input v-model="integrationSettings.email.smtpPort" placeholder="端口"
                  style="width: 100px; margin-bottom: 10px" />
                <el-input v-model="integrationSettings.email.username" placeholder="用户名"
                  style="width: 200px; margin-bottom: 10px" />
                <el-input v-model="integrationSettings.email.password" type="password" placeholder="密码"
                  style="width: 200px" />
              </el-form-item>

              <el-form-item label="短信服务">
                <el-select v-model="integrationSettings.sms.provider" placeholder="选择服务商"
                  style="width: 200px; margin-bottom: 10px">
                  <el-option label="阿里云" value="aliyun" />
                  <el-option label="腾讯云" value="tencent" />
                  <el-option label="华为云" value="huawei" />
                </el-select>
                <el-input v-model="integrationSettings.sms.accessKey" placeholder="Access Key"
                  style="width: 200px; margin-bottom: 10px" />
                <el-input v-model="integrationSettings.sms.secretKey" type="password" placeholder="Secret Key"
                  style="width: 200px" />
              </el-form-item>

              <el-form-item label="文件存储">
                <el-select v-model="integrationSettings.storage.provider" placeholder="选择存储服务"
                  style="width: 200px; margin-bottom: 10px">
                  <el-option label="阿里云OSS" value="aliyun-oss" />
                  <el-option label="腾讯云COS" value="tencent-cos" />
                  <el-option label="七牛云" value="qiniu" />
                  <el-option label="本地存储" value="local" />
                </el-select>
                <el-input v-model="integrationSettings.storage.bucket" placeholder="存储桶名称"
                  style="width: 200px; margin-bottom: 10px" />
                <el-input v-model="integrationSettings.storage.region" placeholder="区域" style="width: 200px" />
              </el-form-item>

              <el-form-item label="第三方登录">
                <div class="integration-group">
                  <el-checkbox v-model="integrationSettings.oauth.wechat.enabled">
                    微信登录
                  </el-checkbox>
                  <el-checkbox v-model="integrationSettings.oauth.qq.enabled">
                    QQ登录
                  </el-checkbox>
                  <el-checkbox v-model="integrationSettings.oauth.github.enabled">
                    GitHub登录
                  </el-checkbox>
                </div>
              </el-form-item>

              <el-form-item>
                <el-button type="primary" @click="saveIntegrationSettings" :loading="saving">
                  保存设置
                </el-button>
                <el-button @click="testConnection" :loading="testing">
                  测试连接
                </el-button>
              </el-form-item>
            </el-form>
          </el-card>

          <!-- 备份设置 -->
          <el-card v-show="activeMenu === 'backup'" class="settings-content">
            <template #header>
              <div class="card-header">
                <el-icon>
                  <FolderOpened />
                </el-icon>
                <span>备份设置</span>
              </div>
            </template>

            <el-form :model="backupSettings" label-width="150px">
              <el-form-item label="自动备份">
                <el-switch v-model="backupSettings.autoBackup.enabled" active-text="开启" inactive-text="关闭" />
              </el-form-item>

              <el-form-item label="备份频率" v-if="backupSettings.autoBackup.enabled">
                <el-select v-model="backupSettings.autoBackup.frequency" style="width: 200px">
                  <el-option label="每日" value="daily" />
                  <el-option label="每周" value="weekly" />
                  <el-option label="每月" value="monthly" />
                </el-select>
              </el-form-item>

              <el-form-item label="备份时间" v-if="backupSettings.autoBackup.enabled">
                <el-time-picker v-model="backupSettings.autoBackup.time" placeholder="选择备份时间" style="width: 200px" />
              </el-form-item>

              <el-form-item label="保留天数">
                <el-input-number v-model="backupSettings.retentionDays" :min="7" :max="365" style="width: 150px" />
                <span style="margin-left: 10px">天</span>
              </el-form-item>

              <el-form-item label="备份内容">
                <div class="backup-group">
                  <el-checkbox v-model="backupSettings.content.database">
                    数据库
                  </el-checkbox>
                  <el-checkbox v-model="backupSettings.content.files">
                    文件
                  </el-checkbox>
                  <el-checkbox v-model="backupSettings.content.configs">
                    配置
                  </el-checkbox>
                </div>
              </el-form-item>

              <el-form-item>
                <el-button type="primary" @click="saveBackupSettings" :loading="saving">
                  保存设置
                </el-button>
                <el-button type="success" @click="createBackup" :loading="backing">
                  立即备份
                </el-button>
              </el-form-item>
            </el-form>

            <!-- 备份历史 -->
            <el-divider>备份历史</el-divider>
            <el-table :data="backupHistory" style="width: 100%">
              <el-table-column prop="date" label="备份时间" width="180" />
              <el-table-column prop="type" label="备份类型" width="120" />
              <el-table-column prop="size" label="文件大小" width="120" />
              <el-table-column prop="status" label="状态" width="100">
                <template #default="{ row }">
                  <el-tag :type="row.status === 'success' ? 'success' : 'danger'">
                    {{ row.status === 'success' ? '成功' : '失败' }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template #default="{ row }">
                  <el-button type="primary" link @click="downloadBackup(row)">
                    下载
                  </el-button>
                  <el-button type="success" link @click="restoreBackup(row)">
                    恢复
                  </el-button>
                  <el-button type="danger" link @click="deleteBackup(row)">
                    删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-card>

          <!-- 高级设置 -->
          <el-card v-show="activeMenu === 'advanced'" class="settings-content">
            <template #header>
              <div class="card-header">
                <el-icon>
                  <Tools />
                </el-icon>
                <span>高级设置</span>
              </div>
            </template>

            <el-form :model="advancedSettings" label-width="150px">
              <el-form-item label="调试模式">
                <el-switch v-model="advancedSettings.debugMode" active-text="开启" inactive-text="关闭" />
                <div class="setting-desc">开启后将显示详细的错误信息</div>
              </el-form-item>

              <el-form-item label="日志级别">
                <el-select v-model="advancedSettings.logLevel" style="width: 200px">
                  <el-option label="ERROR" value="error" />
                  <el-option label="WARN" value="warn" />
                  <el-option label="INFO" value="info" />
                  <el-option label="DEBUG" value="debug" />
                </el-select>
              </el-form-item>

              <el-form-item label="缓存设置">
                <el-input-number v-model="advancedSettings.cache.ttl" :min="60" :max="86400" style="width: 150px" />
                <span style="margin: 0 10px">秒</span>
                <el-button @click="clearCache" :loading="clearing">
                  清除缓存
                </el-button>
              </el-form-item>

              <el-form-item label="API限流">
                <el-input-number v-model="advancedSettings.rateLimit.requests" :min="100" :max="10000"
                  style="width: 150px" />
                <span style="margin: 0 10px">次/小时</span>
              </el-form-item>

              <el-form-item label="数据库连接池">
                <el-input-number v-model="advancedSettings.database.maxConnections" :min="10" :max="100"
                  style="width: 150px" />
                <span style="margin-left: 10px">个连接</span>
              </el-form-item>

              <el-form-item label="系统维护">
                <el-switch v-model="advancedSettings.maintenanceMode" active-text="开启" inactive-text="关闭" />
                <div class="setting-desc">开启后系统将进入维护模式</div>
              </el-form-item>

              <el-form-item>
                <el-button type="primary" @click="saveAdvancedSettings" :loading="saving">
                  保存设置
                </el-button>
                <el-button type="warning" @click="resetSettings">
                  重置为默认
                </el-button>
              </el-form-item>
            </el-form>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Setting,
  Bell,
  Lock,
  Connection,
  FolderOpened,
  Tools
} from '@element-plus/icons-vue'

// 响应式数据
const activeMenu = ref('general')
const saving = ref(false)
const testing = ref(false)
const backing = ref(false)
const clearing = ref(false)

// 通用设置
const generalSettings = reactive({
  language: 'zh-CN',
  timezone: 'Asia/Shanghai',
  dateFormat: 'YYYY-MM-DD',
  pageSize: 20,
  autoSave: true
})

// 通知设置
const notificationSettings = reactive({
  email: {
    newApplication: true,
    interviewReminder: true,
    offerUpdate: true,
    systemUpdate: false
  },
  internal: {
    newApplication: true,
    interviewReminder: true,
    offerUpdate: true,
    systemUpdate: true
  },
  sms: {
    urgentInterview: true,
    systemAlert: true
  },
  quietHours: {
    start: null,
    end: null
  }
})

// 安全设置
const securitySettings = reactive({
  passwordPolicy: {
    requireUppercase: true,
    requireLowercase: true,
    requireNumbers: true,
    requireSpecialChars: false,
    minLength: 8
  },
  passwordExpiry: 90,
  loginLockout: {
    enabled: true,
    maxAttempts: 5,
    lockDuration: 15
  },
  twoFactorAuth: false,
  ipWhitelist: {
    enabled: false,
    ips: ''
  }
})

// 集成设置
const integrationSettings = reactive({
  email: {
    smtpHost: '',
    smtpPort: '',
    username: '',
    password: ''
  },
  sms: {
    provider: '',
    accessKey: '',
    secretKey: ''
  },
  storage: {
    provider: 'local',
    bucket: '',
    region: ''
  },
  oauth: {
    wechat: { enabled: false },
    qq: { enabled: false },
    github: { enabled: false }
  }
})

// 备份设置
const backupSettings = reactive({
  autoBackup: {
    enabled: true,
    frequency: 'daily',
    time: null
  },
  retentionDays: 30,
  content: {
    database: true,
    files: true,
    configs: true
  }
})

// 高级设置
const advancedSettings = reactive({
  debugMode: false,
  logLevel: 'info',
  cache: {
    ttl: 3600
  },
  rateLimit: {
    requests: 1000
  },
  database: {
    maxConnections: 20
  },
  maintenanceMode: false
})

// 备份历史
const backupHistory = ref([
  {
    id: 1,
    date: '2024-01-20 02:00:00',
    type: '自动备份',
    size: '125.6 MB',
    status: 'success'
  },
  {
    id: 2,
    date: '2024-01-19 02:00:00',
    type: '自动备份',
    size: '124.2 MB',
    status: 'success'
  },
  {
    id: 3,
    date: '2024-01-18 02:00:00',
    type: '自动备份',
    size: '123.8 MB',
    status: 'failed'
  }
])

// 方法定义

/**
 * 菜单选择
 */
const handleMenuSelect = (key: string) => {
  activeMenu.value = key
}

/**
 * 保存通用设置
 */
const saveGeneralSettings = async () => {
  saving.value = true
  try {
    // TODO: 调用API保存设置
    await new Promise(resolve => setTimeout(resolve, 1000))
    ElMessage.success('通用设置保存成功')
  } catch (error) {
    console.error('保存失败:', error)
    ElMessage.error('保存失败')
  } finally {
    saving.value = false
  }
}

/**
 * 保存通知设置
 */
const saveNotificationSettings = async () => {
  saving.value = true
  try {
    // TODO: 调用API保存设置
    await new Promise(resolve => setTimeout(resolve, 1000))
    ElMessage.success('通知设置保存成功')
  } catch (error) {
    console.error('保存失败:', error)
    ElMessage.error('保存失败')
  } finally {
    saving.value = false
  }
}

/**
 * 保存安全设置
 */
const saveSecuritySettings = async () => {
  saving.value = true
  try {
    // TODO: 调用API保存设置
    await new Promise(resolve => setTimeout(resolve, 1000))
    ElMessage.success('安全设置保存成功')
  } catch (error) {
    console.error('保存失败:', error)
    ElMessage.error('保存失败')
  } finally {
    saving.value = false
  }
}

/**
 * 保存集成设置
 */
const saveIntegrationSettings = async () => {
  saving.value = true
  try {
    // TODO: 调用API保存设置
    await new Promise(resolve => setTimeout(resolve, 1000))
    ElMessage.success('集成设置保存成功')
  } catch (error) {
    console.error('保存失败:', error)
    ElMessage.error('保存失败')
  } finally {
    saving.value = false
  }
}

/**
 * 测试连接
 */
const testConnection = async () => {
  testing.value = true
  try {
    // TODO: 调用API测试连接
    await new Promise(resolve => setTimeout(resolve, 2000))
    ElMessage.success('连接测试成功')
  } catch (error) {
    console.error('测试失败:', error)
    ElMessage.error('连接测试失败')
  } finally {
    testing.value = false
  }
}

/**
 * 保存备份设置
 */
const saveBackupSettings = async () => {
  saving.value = true
  try {
    // TODO: 调用API保存设置
    await new Promise(resolve => setTimeout(resolve, 1000))
    ElMessage.success('备份设置保存成功')
  } catch (error) {
    console.error('保存失败:', error)
    ElMessage.error('保存失败')
  } finally {
    saving.value = false
  }
}

/**
 * 创建备份
 */
const createBackup = async () => {
  backing.value = true
  try {
    // TODO: 调用API创建备份
    await new Promise(resolve => setTimeout(resolve, 3000))
    ElMessage.success('备份创建成功')
    // 刷新备份历史
    loadBackupHistory()
  } catch (error) {
    console.error('创建失败:', error)
    ElMessage.error('备份创建失败')
  } finally {
    backing.value = false
  }
}

/**
 * 下载备份
 */
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const downloadBackup = (row: any) => {
  ElMessage.info(`下载备份：${row.date}`)
  // TODO: 实现下载功能
}

/**
 * 恢复备份
 */
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const restoreBackup = (row: any) => {
  ElMessageBox.confirm(
    `确定要恢复到 ${row.date} 的备份吗？此操作将覆盖当前数据！`,
    '恢复备份确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    ElMessage.success('备份恢复成功')
    // TODO: 调用API恢复备份
  })
}

/**
 * 删除备份
 */
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const deleteBackup = (row: any) => {
  ElMessageBox.confirm(
    `确定要删除 ${row.date} 的备份吗？`,
    '删除备份确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    ElMessage.success('备份删除成功')
    // TODO: 调用API删除备份
    loadBackupHistory()
  })
}

/**
 * 保存高级设置
 */
const saveAdvancedSettings = async () => {
  saving.value = true
  try {
    // TODO: 调用API保存设置
    await new Promise(resolve => setTimeout(resolve, 1000))
    ElMessage.success('高级设置保存成功')
  } catch (error) {
    console.error('保存失败:', error)
    ElMessage.error('保存失败')
  } finally {
    saving.value = false
  }
}

/**
 * 清除缓存
 */
const clearCache = async () => {
  clearing.value = true
  try {
    // TODO: 调用API清除缓存
    await new Promise(resolve => setTimeout(resolve, 1000))
    ElMessage.success('缓存清除成功')
  } catch (error) {
    console.error('清除缓存失败:', error)
    ElMessage.error('缓存清除失败')
  } finally {
    clearing.value = false
  }
}

/**
 * 重置设置
 */
const resetSettings = () => {
  ElMessageBox.confirm(
    '确定要重置所有设置为默认值吗？',
    '重置设置确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    // TODO: 重置所有设置为默认值
    ElMessage.success('设置已重置为默认值')
  })
}

/**
 * 加载备份历史
 */
const loadBackupHistory = () => {
  // TODO: 调用API获取备份历史
}

/**
 * 加载设置数据
 */
const loadSettings = () => {
  // TODO: 调用API获取所有设置数据
}

// 生命周期
onMounted(() => {
  loadSettings()
  loadBackupHistory()
})
</script>

<style scoped>
.system-settings {
  padding: 0;
}

.page-header {
  margin-bottom: 20px;
}

.page-title {
  font-size: 24px;
  font-weight: 600;
  color: #303133;
  margin: 0 0 4px 0;
}

.page-desc {
  color: #909399;
  margin: 0;
}

.settings-container {
  min-height: 600px;
}

.settings-menu {
  border-radius: 8px;
}

.settings-nav {
  border-right: none;
}

.settings-nav .el-menu-item {
  border-radius: 6px;
  margin-bottom: 4px;
}

.settings-nav .el-menu-item.is-active {
  background-color: #ecf5ff;
  color: #409eff;
}

.settings-content {
  border-radius: 8px;
  min-height: 500px;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 16px;
}

.notification-group,
.security-group,
.integration-group,
.backup-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.notification-group .el-checkbox,
.security-group .el-checkbox,
.integration-group .el-checkbox,
.backup-group .el-checkbox {
  margin-right: 0;
}

.setting-desc {
  font-size: 12px;
  color: #909399;
  margin-top: 4px;
}

.el-form-item {
  margin-bottom: 24px;
}

.el-divider {
  margin: 30px 0 20px 0;
}

@media (max-width: 768px) {
  .settings-container .el-col {
    margin-bottom: 20px;
  }

  .settings-menu {
    margin-bottom: 20px;
  }

  .settings-nav {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
  }

  .settings-nav .el-menu-item {
    flex-shrink: 0;
  }
}
</style>
